<template>
	<view class="cart-page">
		<view v-if="cartList.length === 0" class="empty-cart">
			<text class="empty-text">购物车空空如也</text>
		</view>

		<view v-else>
			<view class="cart-list">
				<up-swipe-action>
					<up-swipe-action-item v-for="(item, index) in cartList" :key="item.cartid" :index="index"
						:options="options" @click="handleDelete(index)">
						<template #default>
							<view class="cart-item">
								<view class="item-select" @click="selectCartOne(item.cartid, !item.flag)">
									<view class="checkbox" :class="{ active: item.flag }">
										<text v-if="item.flag">✓</text>
									</view>
								</view>

								<up-image :src="item.img1" :show-loading="true" width="160rpx" height="160rpx"
									@click="onImageClick(item)" class="item-image"></up-image>

								<view class="item-info">
									<text class="item-name">{{ item.proname }}</text>
									<view class="item-info-box">
										<view class="item-price-row">
											<text
												class="item-price">¥{{ (item.originprice * item.discount / 10).toFixed(2) }}</text>
											<text class="item-original-price"
												v-if="item.discount < 10">¥{{ item.originprice }}</text>
										</view>
										<view class="item-quantity-row">
											<view class="quantity-control">
												<button class="quantity-btn"
													@click="updateCartNum(item.cartid, item.num - 1)"
													:disabled="item.num <= 1">-</button>
												<text class="quantity-num">{{ item.num }}</text>
												<button class="quantity-btn"
													@click="updateCartNum(item.cartid, item.num + 1)">+</button>
											</view>
										</view>
									</view>
								</view>
							</view>
						</template>
					</up-swipe-action-item>
				</up-swipe-action>
			</view>

			<view class="cart-footer">
				<view class="footer-left">
					<view class="select-all" @click="selectAll(!hasSelectedAll)">
						<view class="checkbox" :class="{ active: hasSelectedAll }">
							<text v-if="hasSelectedAll">✓</text>
						</view>
						<text>全选</text>
					</view>
				</view>
				<view class="footer-right">
					<text class="total-price">合计: ¥{{ totalPrice.toFixed(2) }}</text>
					<button class="checkout-btn" @click="checkout"
						:disabled="selectedCount === 0">结算({{ selectedCount }})</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted
	} from 'vue'
	import {
		useCartStore
	} from '../../stores/cart.js'
	import {
		setTabBarBadge
	} from "/utils/tabBarHelper.js"
	import {
		onPullDownRefresh
	} from '@dcloudio/uni-app'

	const cartStore = useCartStore()
	const cartList = computed(() => cartStore.cartList)
	const options = reactive([{
		text: '删除',
		style: {
			backgroundColor: '#dd524d',
		},
	}])

	const selectCartOne = async (cartid, flag) => {
		await cartStore.selectCartOne(cartid, flag)
	}

	const updateCartNum = async (cartid, num) => {
		if (num < 1) return
		await cartStore.updateCartNum(cartid, num)
		setTabBarBadge()
	}

	const deleteCartItem = async (cartid) => {
		await cartStore.deleteCartItem(cartid)
		setTabBarBadge()
	}

	const selectAll = async (type) => {
		await cartStore.selectCartAll(type)
	}

	const getCartNum = computed(() => cartStore.getCartNum)
	const totalCartNum = computed(() => cartStore.totalCartNum)

	const hasSelectedAll = computed(() => {
		return cartList.value.length > 0 && cartList.value.every(item => item.flag)
	})

	const selectedItems = computed(() => {
		return cartList.value.filter(item => item.flag)
	})

	const selectedCount = computed(() => {
		return selectedItems.value.reduce((total, item) => total + item.num, 0)
	})

	const totalPrice = computed(() => {
		return selectedItems.value.reduce((total, item) => {
			return total + (item.originprice * item.discount / 10) * item.num
		}, 0)
	})

	const checkout = () => {
		if (selectedCount.value === 0) {
			uni.showToast({
				title: '请选择商品',
				icon: 'none'
			})
			return
		}
		console.log('结算商品:', selectedItems.value)
		uni.showToast({
			title: '跳转结算',
			icon: 'none'
		})
	}

	const onImageClick = (item) => {
		console.log('点击图片:', item)
	}

	const handleDelete = (index) => {
		deleteCartItem(cartList.value[index].cartid)
	}

	onPullDownRefresh(() => {
		cartStore.getCart()
			.then(res => {
				uni.showToast({
					title: '刷新成功',
					icon: 'success'
				})
			})
			.catch(err => {
				uni.showToast({
					title: '刷新失败',
					icon: 'error'
				})
			})
			.finally(() => {
				uni.stopPullDownRefresh()
			})
	})

	onMounted(() => {
		cartStore.getCart()
		setTabBarBadge()
	})
</script>

<style lang="scss" scoped>
	.cart-page {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 150rpx;
	}

	.empty-cart {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60vh;
	}

	.empty-text {
		font-size: 32rpx;
		color: #999;
	}

	.cart-item {
		background-color: white;
		display: flex;
		align-items: center;
		padding: 20rpx;
		min-height: 120rpx;
		border-bottom: 1px solid rgba(128, 128, 128, 0.3);
	}

	.item-select {
		margin-right: 20rpx;
	}

	.checkbox {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #ddd;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: white;

		&.active {
			background-color: #ff4757;
			border-color: #ff4757;
		}
	}

	.item-image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.item-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 120rpx;
	}

	.item-name {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 15rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-height: 1.5;
		max-height: calc(30rpx * 1.5 * 2);
	}

	.item-info-box {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: space-around;
	}

	.item-price-row {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.item-price {
		font-size: 32rpx;
		color: #ff4757;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.item-original-price {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
	}

	.item-quantity-row {
		display: flex;
		justify-content: flex-end;
		height: 60rpx;
	}

	.quantity-control {
		display: flex;
		align-items: center;
		border: 1rpx solid #ddd;
		border-radius: 6rpx;
	}

	.quantity-btn {
		width: 60rpx;
		height: 60rpx;
		border: none;
		background-color: #f8f8f8;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		&:disabled {
			opacity: 0.5;
		}
	}

	.quantity-num {
		width: 80rpx;
		height: 60rpx;
		border: none;
		background-color: white;
		text-align: center;
		line-height: 60rpx;
		font-size: 28rpx;
	}

	.cart-footer {
		position: fixed;
		bottom: 90rpx;
		left: 0;
		right: 0;
		background-color: white;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.footer-left {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.select-all {
		display: flex;
		align-items: center;
		margin-right: 30rpx;
		gap: 10rpx;
	}

	.footer-right {
		display: flex;
		align-items: center;
	}

	.total-price {
		font-size: 32rpx;
		color: #ff4757;
		font-weight: bold;
		margin-right: 30rpx;
	}

	.checkout-btn {
		background-color: #ff4757;
		color: white;
		border: none;
		border-radius: 20rpx;
		padding: 10rpx 30rpx;
		font-size: 28rpx;

		&:disabled {
			background-color: #ccc;
		}
	}
</style>